<!DOCTYPE html>
<html>
<meta>
    <meta charset="utf-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta>
    <title>故障应急报警</title>
    <link href="/static/css/layui.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <p class="title-row">故障应急报警</p>
                    </div>
                    <div class="layui-card-body">
                        <form class="layui-form p20 lineBox layui-form" action="">
                            <div class="layui-inline">
                                <label class="layui-form-label">线路选择:</label>
                                <div class="layui-input-block">
                                    <select name="doMain" id="majorList" lay-filter="majorListFilter">
                                        <option value="">请选择</option>
                                        <option value="1号线">一号线</option>
                                        <option value="2号线">二号线</option>
                                        <option value="3号线">三号线</option>
                                        <option value="4号线">四号线</option>
                                        <option value="5号线">五号线</option>
                                        <option value="6号线">六号线</option>
                                        <option value="7号线">七号线</option>
                                        <option value="8号线">八号线</option>
                                        <option value="9号线">九号线</option>
                                        <option value="10号线">十号线</option>
                                        <option value="11号线">十一号线</option>
                                        <option value="12号线">十二号线</option>
                                        <option value="13号线">十三号线</option>
                                        <option value="14号线">十四号线</option>
                                        <option value="15号线">十五号线</option>
                                        <option value="16号线">十六号线</option>
                                        <option value="17号线">十七号线</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn layuiadmin-btn-admin btnSearch" type="button"
                                    lay-filter="LAY-user-back-search">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                    查询
                                </button>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn layuiadmin-btn-admin btnClear" type="button"
                                    lay-filter="LAY-user-back-search">
                                    <i class="layui-icon layui-icon-delete layuiadmin-button-btn"></i>
                                    清空
                                </button>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn layuiadmin-btn-admin addForm" type="button" lay-filter="LAY-user-back-search">
                                    <i class="layui-icon layui-icon-addition layuiadmin-button-btn"></i>
                                    新增
                                </button>
                            </div>
                        </form>
                        <div class="result">
                            <p>应急事件处理完成数<span class="deal-count-clear">0</span></p>
                            <p>应急事件发生数<span class="deal-count-in">0</span></p>
                        </div>
                        <div class="faultTable">
                            <table class="layui-hide" id="test" lay-filter="faultTable"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="optinBar">
        <a class="layui-btn layui-btn-sm" lay-event="detail">查看</a>
    </script>

    <script src="../static/layui.js"></script>
    <script src="index.js"></script>
    <script>
        var selectTableRow;
        layui.config({
            base:''
        });
        layui.use(['layer', 'form', 'table'], function () {
            var layer = layui.layer
        , $ = layui.$
        , table = layui.table //表格
        , form = layui.form;
            // form.on('submit(LAY-user-back-search)', function (data) {
            //     //执行重载
            //     table.reload('faultTable', {
            //     });
            // });


            $('.btnSearch').on('click', function () {
                renderTable();
            });
            $('.btnClear').on('click', function () {
                renderTableNull();
            });
            $('.addForm').on('click',function(){
                layer.open({
                        type: 2
                        , title: '新增'
                        , content: 'addForm.html'
                        , area: ['90%', '90%']
                        , yes: function (index, layero) {
                            //点击确认触发 iframe 内容中的按钮提交
                            var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                            submit.click();
                        },
                        success: function (layero, index) {
                            // $(".layui-layer-title")[0].innerText = data.elem.title + '总体处理流程';
                        },
                    });
            })
            window.renderTable=function () {
                var chooseId = $("[name='doMain']").val();
                table.render({
                    elem: '#test'
                    , url: '/fault/faultWarningList'
                    , where: { 'lineId': chooseId}
                    , parseData: function (res) {
                        var data = res.rows;
                        $('.deal-count-clear').text(res.msg);
                        $('.deal-count-in').text(data.length - res.msg);
                        return {
                            "code": res.code=='success'?0:res.code,
                            "msg": res.msg,
                            "count": res.total,
                            "data": data
                        };
                    }
                    , cols: [[
                        { field: 'faultID', title: '故障点', align: 'center', width: '20%' }
                        , { field: 'faultLine', title: '线路', align: 'center', width: '15%' }
                        , { field: 'majorList', title: '专业', align: 'center', templet: generateMajorBtn }
                        , { fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#optinBar' }
                    ]]
                    ,page:true
                });
            }
            function renderTableNull(){
                table.render({
                    elem: '#test'
                    , data: []
                    , cols: [[
                        { field: 'result', title: '故障点', align: 'center', width: '20%' }
                        , { field: 'line', title: '线路', align: 'center', width: '15%' }
                        , { field: 'major', title: '专业', align: 'center', templet: generateMajorBtn }
                        , { fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#optinBar' }
                    ]]
                    , page: true
                });

            }
            //监听行单击事件（双击事件为：rowDouble）
            // table.on('row(test)', function(obj){
            //     var data = obj.data.name;
            //     //标注选中样式
            //     obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            //     window.location.href='index.html?id='+data;
            // });
            table.on('tool(faultTable)', function (obj) {
                var data = obj.data;
                selectTableRow=data;
                if (obj.event === 'detail') {
                    layer.open({
                        type: 2
                        , title: '故障处理流程'
                        , content: 'index.html'
                        , area: ['90%', '90%']
                        , yes: function (index, layero) {
                            //点击确认触发 iframe 内容中的按钮提交
                            // var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                            // submit.click();
                        },
                        success: function (layero, index) {
                            // $(".layui-layer-title")[0].innerText = data.elem.title + '总体处理流程';
                        },
                    });
                }
                if (obj.event.indexOf('eventCheck_')>-1) {
                    var indexConfig=obj.event.split('_')[1];
                    layer.open({
                        type: 2
                        , title: 'false'
                        , content: 'popup.html'
                        , area: ['90%', '90%']
                        , yes: function (index, layero) {
                            //点击确认触发 iframe 内容中的按钮提交
                            var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                            submit.click();
                        },
                        success: function (layero, index) {
                            window.checkTitle= majorConfig[indexConfig].major;
                            setFlowData(selectTableRow.faultID,majorConfig[indexConfig].major_v);
                            $(".layui-layer-title")[0].innerText = majorConfig[indexConfig].major + '处理流程';
                        },
                    });
                }
            });
            
            renderTable();
        });

        var flowData;
        function refreshData(){
                renderTable();
            }
        var majorConfig = [
            {
                'major': '供电',
                'major_v': '9'
            },
            {
                'major': '车辆',
                'major_v': '10'
            },
            {
                'major': '通号',
                'major_v': '11'
            },
            {
                'major': '工务',
                'major_v': '12'
            },
            {
                'major': '物后',
                'major_v': '13'
            },
        ]
        function getMajorConfig(){
            return majorConfig;
        }
        //渲染表格专业列 故障点已存在的专业红色显示
        function generateMajorBtn(data) {
            var majorStrList = data.majorList;
            var htmlStr = "";
            let i = 0;
            var re_value = majorStrList[i];
            for (let index = 0; index < majorConfig.length; index++) {
                const element = majorConfig[index];
                if (re_value == element.major_v) {
                    htmlStr += '<a class="layui-btn layui-btn-sm" lay-event="eventCheck_'+index+'" major_value="' + element.major_v + '" style="background-color:#FF5722;">' + element.major + '</a>';
                    re_value = majorStrList[++i];
                } else {
                    htmlStr += '<a class="layui-btn layui-btn-sm" lay-event="event_'+index+'" major_value="' + element.major_v + '" >' + element.major + '</a>';
                }
            }
            return htmlStr;
        }
        function getTableRow() {
            return selectTableRow;
        }
        // function transmitData(){
        //     return {
        //         'id' : 10,
        //         'content' : '故障点暂时无异常'
        //     }
        // }
        function refreshAddFormData(){
            refreshData();
            }
    </script>
</body>

</html>